<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目文档</title>
    
    <!-- 引入远程样式 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3a0ca3;
            --accent-color: #7209b7;
            --light-bg: #f8f9fa;
            --dark-bg: #212529;
            --text-color: #333;
            --text-light: #6c757d;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            color: var(--text-color);
            line-height: 1.6;
        }
        
        .sidebar {
            background: var(--light-bg);
            height: 100vh;
            position: sticky;
            top: 0;
            padding: 2rem 1rem;
            overflow-y: auto;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
        }
        
        .sidebar .nav-link {
            color: var(--text-light);
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            margin-bottom: 0.25rem;
        }
        
        .sidebar .nav-link:hover, .sidebar .nav-link.active {
            color: var(--primary-color);
            background-color: rgba(67, 97, 238, 0.1);
        }
        
        .main-content {
            padding: 2rem 3rem;
        }
        
        .header {
            border-bottom: 1px solid #e9ecef;
            padding-bottom: 1rem;
            margin-bottom: 2rem;
        }
        
        .code-block {
            background-color: #f8f9fa;
            border-left: 4px solid var(--primary-color);
            padding: 1rem;
            border-radius: 0.25rem;
            font-family: 'Courier New', monospace;
            margin: 1.5rem 0;
        }
        
        .feature-card {
            border: 1px solid #e9ecef;
            border-radius: 0.5rem;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .logo {
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 2rem;
            display: inline-block;
            font-size: 1.5rem;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-weight: 600;
            margin-top: 2rem;
            margin-bottom: 1rem;
        }
        
        h1 {
            color: var(--primary-color);
        }
        
        h2 {
            color: var(--secondary-color);
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #e9ecef;
        }
        
        .footer {
            text-align: center;
            padding: 2rem;
            margin-top: 3rem;
            border-top: 1px solid #e9ecef;
            color: var(--text-light);
        }
        
        @media (max-width: 768px) {
            .sidebar {
                height: auto;
                position: relative;
            }
            
            .main-content {
                padding: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-3 col-lg-2 sidebar">
                <div class="d-flex flex-column">
                    <a href="#" class="logo">
                        <i class="bi bi-code-slash"></i> 项目文档
                    </a>
                    
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link active" href="#introduction"><i class="bi bi-house"></i> 介绍</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#installation"><i class="bi bi-download"></i> 安装</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#usage"><i class="bi bi-play-circle"></i> 使用指南</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#api"><i class="bi bi-code-square"></i> API参考</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#examples"><i class="bi bi-lightbulb"></i> 示例</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#faq"><i class="bi bi-question-circle"></i> 常见问题</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#contributing"><i class="bi bi-people"></i> 贡献指南</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#license"><i class="bi bi-shield-check"></i> 许可证</a>
                        </li>
                    </ul>
                    
                    <div class="mt-auto">
                        <div class="mt-4">
                            <h6>版本</h6>
                            <select class="form-select form-select-sm">
                                <option>v2.1.0 (最新)</option>
                                <option>v2.0.4</option>
                                <option>v1.5.2</option>
                            </select>
                        </div>
                        
                        <div class="mt-3">
                            <h6>相关链接</h6>
                            <div class="d-flex">
                                <a href="#" class="btn btn-sm btn-outline-secondary me-1"><i class="bi bi-github"></i></a>
                                <a href="#" class="btn btn-sm btn-outline-primary me-1"><i class="bi bi-file-text"></i></a>
                                <a href="#" class="btn btn-sm btn-outline-info"><i class="bi bi-chat"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 主内容区 -->
            <div class="col-md-9 col-lg-10 main-content">
                <!-- 介绍部分 -->
                <section id="introduction">
                    <div class="header">
                        <h1>项目名称</h1>
                        <p class="lead">一个简洁而强大的项目描述，说明项目的核心功能和价值主张。</p>
                    </div>
                    
                    <div class="alert alert-primary d-flex align-items-center" role="alert">
                        <i class="bi bi-info-circle me-2"></i>
                        <div>这是项目的重要提示或公告信息。</div>
                    </div>
                    
                    <h2>功能特性</h2>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="feature-card">
                                <h4><i class="bi bi-lightning"></i> 高性能</h4>
                                <p>描述项目的性能优势，例如快速响应时间、低资源占用等。</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="feature-card">
                                <h4><i class="bi bi-shield-check"></i> 安全可靠</h4>
                                <p>描述项目的安全特性和可靠性保证。</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="feature-card">
                                <h4><i class="bi bi-gear"></i> 易于使用</h4>
                                <p>描述项目的易用性和用户体验设计。</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="feature-card">
                                <h4><i class="bi bi-puzzle"></i> 可扩展</h4>
                                <p>描述项目的扩展性和自定义能力。</p>
                            </div>
                        </div>
                    </div>
                    
                    <h2>快速开始</h2>
                    <p>只需几行代码即可开始使用本项目：</p>
                    <div class="code-block">
                        <code>
                            # 安装依赖<br>
                            npm install project-name<br><br>
                            
                            # 导入使用<br>
                            import { Project } from 'project-name';<br>
                            const instance = new Project();<br>
                            instance.run();
                        </code>
                    </div>
                </section>
                
                <!-- 安装部分 -->
                <section id="installation" class="mt-5">
                    <h2>安装指南</h2>
                    <p>支持多种安装方式，选择最适合您的一种。</p>
                    
                    <h4>使用NPM安装</h4>
                    <div class="code-block">
                        <code>npm install project-name --save</code>
                    </div>
                    
                    <h4>使用Yarn安装</h4>
                    <div class="code-block">
                        <code>yarn add project-name</code>
                    </div>
                    
                    <h4>使用CDN</h4>
                    <div class="code-block">
                        <code>&lt;script src="https://cdn.example.com/project-name.min.js"&gt;&lt;/script&gt;</code>
                    </div>
                    
                    <h4>从源码构建</h4>
                    <div class="code-block">
                        <code>
                            git clone https://github.com/username/project-name.git<br>
                            cd project-name<br>
                            npm install<br>
                            npm run build
                        </code>
                    </div>
                </section>
                
                <!-- 使用指南部分 -->
                <section id="usage" class="mt-5">
                    <h2>使用指南</h2>
                    <p>详细的使用说明和示例。</p>
                    
                    <h4>基本用法</h4>
                    <div class="code-block">
                        <code>
                            // 初始化项目<br>
                            const project = new Project({<br>
                            &nbsp;&nbsp;option1: true,<br>
                            &nbsp;&nbsp;option2: 'value'<br>
                            });<br><br>
                            
                            // 调用方法<br>
                            project.doSomething();<br><br>
                            
                            // 处理结果<br>
                            project.on('result', (data) => {<br>
                            &nbsp;&nbsp;console.log('Received:', data);<br>
                            });
                        </code>
                    </div>
                    
                    <h4>配置选项</h4>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>选项</th>
                                    <th>类型</th>
                                    <th>默认值</th>
                                    <th>描述</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>option1</td>
                                    <td>Boolean</td>
                                    <td>true</td>
                                    <td>启用或禁用功能A</td>
                                </tr>
                                <tr>
                                    <td>option2</td>
                                    <td>String</td>
                                    <td>'default'</td>
                                    <td>设置模式类型</td>
                                </tr>
                                <tr>
                                    <td>option3</td>
                                    <td>Number</td>
                                    <td>100</td>
                                    <td>设置超时时间(毫秒)</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </section>
                
                <!-- 其他部分的内容可以根据需要添加 -->
                
                <div class="footer">
                    <p>© 2023 项目名称 · 由社区驱动</p>
                    <p class="text-muted">最后更新: 2023年5月15日</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入远程脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 简单的平滑滚动实现
        document.querySelectorAll('.sidebar .nav-link').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                window.scrollTo({
                    top: targetElement.offsetTop - 20,
                    behavior: 'smooth'
                });
                
                // 更新活动状态
                document.querySelectorAll('.sidebar .nav-link').forEach(item => {
                    item.classList.remove('active');
                });
                this.classList.add('active');
            });
        });
        
        // 根据滚动位置更新活动链接
        window.addEventListener('scroll', function() {
            const sections = document.querySelectorAll('section');
            let currentSection = '';
            
            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                if (pageYOffset >= sectionTop - 100) {
                    currentSection = section.getAttribute('id');
                }
            });
            
            document.querySelectorAll('.sidebar .nav-link').forEach(link => {
                link.classList.remove('active');
                if (link.getAttribute('href') === '#' + currentSection) {
                    link.classList.add('active');
                }
            });
        });
    </script>
</body>
</html>